define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');
  var d3 = require('d3')

  var data = require('hy5b/auto/graph-data')

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    var root = d3.select('#ci');
    var svg = root.append('svg').append('g');

    var dataset = svg.data(data.children);

    dataset.enter().append('rect')
      .attr('width', function(d) {
        return d.width;
      })
      .attr('height', function(d) {
        return d.height;
      })
    var svg = root.append('svg')
      .attr('width', 800)
      .attr('height', 600)
      .append('g');

    /**
     * <line> 线
     * <ellipse> 椭圆
     * <rect> 矩形
     * <circle> 圆
     * <polygon> 不少于三个边的图形
     */
    var style = {
      fill: 'none',
      stroke: '#0086B2',
      'stroke-width': 1
    };

    var p_line = _.extend({
      x1: 0,
      y1: 200,
      x2: 200,
      y2: 0
    }, style, {
      'stroke-width': 20,
      stroke: 'url(#lineGradient)'
    });
    shape(p_line, 'line', svg)

    var p_rect = _.extend({
      x:0,
      y:0,
      width: 200,
      // transform: 'matrix(1,2,3,4,5,6)',
      height: 200,
      rx: 0,
      ry: 0
    }, style);
    shape(p_rect, 'rect', svg)

    var p_circle = _.extend({
      cx: 100,
      cy: 100,
      r: 100
    }, style)
    shape(p_circle, 'circle', svg)

    var p_polyline = _.extend({
      points: '0,0 200,100 0,100 200,200'
    }, style)
    shape(p_polyline, 'polyline', svg)

    var p_ellipse = _.extend({
      cx: 100,
      cy: 100,
      rx: 100,
      ry: 30
    }, style)
    shape(p_ellipse, 'ellipse', svg)

    var p_polygon = _.extend({
      points: '100,0 0,200 200,200'
    }, style)
    shape(p_polygon, 'polygon', svg)

    var p_path = _.extend({
      d: "M250 150 H150 350 V150 350"
    }, style)
    shape(p_path, 'path', svg)


    // var dataset = svg.data(data.children);

    // dataset.enter().append('rect')
    //   .attr('width', function(d) {
    //     return d.width;
    //   })
    //   .attr('height', function(d) {
    //     return d.height;
    //   })

    function shape(p, type, g) {
      var shap = g.append(type)
      _.each(p, function(v, k) {
        shap.attr(k, v);
      })
    }
  }

  return main;
})
